<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="page-title">
      固网增加
    </div>
    <van-form ref="form">
      <van-field label="是否FTTH覆盖" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="swlyGwData.ifFtth" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field label="是否10GPON覆盖" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="swlyGwData.ifPon" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field label="是否需要光改" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="swlyGwData.ifGw" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>

      <div class="borderText">
      <van-field
        readonly
        clickable
        :value="swlyGwData.ftthNum"
        label="FTTH空闲端口数"
        label-width="60%"
        @touchstart.native.stop="numberShow = true"
      />
      <van-number-keyboard
        v-model="swlyGwData.ftthNum"
        :show="numberShow"
        @blur="numberShow = false"
        theme="custom"
        close-button-text="完成"
      />
      </div>
    </van-form>
    <div v-if="finishFlag">
      <div style="margin: 16px; text-align: center">
        <div class="form-btn disabled" >当前小区任务已完成</div>
      </div>
    </div>
    <div v-else>
      <div style="margin: 16px; text-align: center">
        <div class="form-btn" @click="handleSubmit">提交固网结果</div>
      </div>
<!--      <div style="margin: 16px; text-align: center">-->
<!--        <van-dialog-->
<!--          v-model="deleteShow"-->
<!--          title="删除固网结果"-->
<!--          show-cancel-button-->
<!--          @cancel="deleteShow = false"-->
<!--          @confirm="handleDelete"-->
<!--        ></van-dialog>-->
<!--        <div class="form-btn danger" v-if="gwId !== '' && gwId !== undefined && gwId !== null" @click="handleDeleteShow">当前楼宇无固网</div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import {
  submitWjdcResult,
  communityWjdcPercent,
  deleteWjdcResult,
  getCommunityInfo,
  communitySwlyGwResult,
  submitSwlyGwResult,
  submitSwlyResult,
  deleteSwlyResult
} from '@/api/publicline/kdcs'
import { Toast} from 'vant'
import {geometry, getCurrentLocation} from "@/utils/geo";

export default {
  data() {
    return {
      numberShow: false,
      finishFlag: false,
      deleteShow: false,
      gwId: '',
      communityId: '',
      breadcrumb: [],
      location: '',
      swlyGwData: {
        id: '',
        taskType: 'gw',
        villageId: '',
        buildId: '',
        ifFtth: '0',
        ifPon: '0',
        ftthNum: '0',
        ifGw: '0'
      },
      communityInfo: {}
    }
  },
  created() {
    const {communityId, breadcrumb, taskId, buildId} = this.$route.query
    this.communityId = communityId
    this.breadcrumb = breadcrumb.split('/')
    this.gwId = taskId
    this.swlyGwData.villageId = communityId
    this.swlyGwData.buildId = buildId
    if(taskId !== '' && taskId !== undefined && taskId !== null) {
      this.searchSwlyGwTask()
    }
    this.getCommunityInfo()
    getCurrentLocation( (info) => {
      this.location = info;
    }, () => {
      Toast.fail("当前定位获取失败")
    } )
  },
  methods: {
    getCommunityInfo() {
      getCommunityInfo( { VILLAGE_ID: this.communityId } )
        .then( res => {
          if ( res.success ) {
            const data = res.result.data;
            this.communityInfo = data;
            this.communityInfo.xqwl = JSON.parse(data.xqwl);
            if(data.state === '2') {
              this.finishFlag = true
            }
          }
        } )
    },
    searchSwlyGwTask() {
      communitySwlyGwResult({ id: this.gwId })
        .then(
          res => {
            if (res.success) {
              const data = res.result
              this.swlyGwData.id = data.id
              this.swlyGwData.ifFtth = data.ifFtth
              this.swlyGwData.ifPon = data.ifPon
              this.swlyGwData.ftthNum = data.ftthNum
              this.swlyGwData.ifGw = data.ifGw
            }
          }
        )
    },
    handleSubmit() {
      const center = this.location
      this.swlyGwData = {
        ...this.swlyGwData,
        location: this.location
      }
      let xqwl = []
      for ( const item of this.communityInfo.xqwl ) {
        xqwl.push( item.join(',') )
      }
      xqwl = xqwl.join(';')

      geometry(xqwl, center, 'distance', (distance) => {
        if(distance < 100) {
          submitSwlyResult( this.swlyGwData )
            .then ( res => {
              if ( res.success ) {
                const data = res.result;
                Toast.success("固网结果提交完成")
                // 打卡成功
                this.$router.go( -1)
              }
            } )
        } else {
          Toast.fail('未到达小区范围，不允许提交结果');
        }
      })
    },
    handleDeleteShow() {
      this.deleteShow = true
    },
    handleDelete() {
      const delParam = {
        villageId: this.swlyGwData.villageId,
        buildId: this.swlyGwData.buildId,
        gwDelFlag: '1'
      }
      deleteSwlyResult( delParam )
        .then ( res => {
          if ( res.success ) {
            const data = res.result;
            Toast.success("固网结果删除成功")
            // 打卡成功
            this.$router.go( -1)
          }
        } )
    }
  }
}
</script>

<style lang="less" scoped>
.sub-name {
  border: 1px solid #4D98FF;
  border-radius: 3px 8px 3px 8px;
  color: #4D98FF;
  font-size: 12px;
  line-height: 12px;
  padding: 2px 6px 0;
}
.page {
  background: #FFF;

  .disabled {
    background: #EEE;
    color: #777;
    border-color: #ccc;
  }
}

.radio-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.page-title {
  font-size: 14px;
  padding: 10px 6px;
  text-align: left;
  display: flex;
  align-items: center;

  &:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #008cff;
    margin-right: 8px;
  }
}

.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}

.form-btn {
  padding: 10px 10px;
  border-radius: 4px;
  background: #008cff;
  color: #FFF;

  &.danger {
    background: #ff3700;
    color: #FFF;
  }
}

.borderText::v-deep .van-field__value {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding-left: 5px;
}
</style>